<template>
  <div class="mapyemain">
    <header>
      <a
        class="city-name"
        title="跳转城市选择页"
        href="javascript:;"
        @click="goback"
      >
        <van-icon name="arrow-left" class="icon.icon-go-back" />
        杭州
        <van-icon name="arrow-down"></van-icon>
      </a>
      <a href="javascript:;">
        <van-icon
          name="https://i.52112.com/icon/jpg/256/20190311/32554/1598652.jpg"
          class="icon.icon-go-back"
          style="width: 40px"
        />
        巴乐兔找房
      </a>
      <a class="icon-user" title="进入个人中心" href="javascript:;">
        <van-icon name="user-o" color="blue" />
      </a>
    </header>
    <!-- 搜索框 -->
    <div class="mapArea">
      <input type="search" id="" placeholder="🔍请输入楼盘地址" name="search" />
      <van-icon name="bars" />
    </div>
    <div class="gaodemap" id="container"></div>
  </div>
</template>
<script>
/* 引入地图 */
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  setup() {
    AMapLoader.load({
      key: "b91c0b25f2acb0fe927f0d42202f0fd2", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: "1.1", // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: "1.3.2", // Loca 版本，缺省 1.3.2
      },
    })
      .then((AMap) => {
        // var map = new AMap.Map("container");
        // console.log(map);
        var map = new AMap.Map("container", {
          center: [120.266011, 30.302529],
          zoom: 15,
        });
        //实时路况图层
        var trafficLayer = new AMap.TileLayer.Traffic({
          zIndex: 10,
        });
        map.add(trafficLayer); //添加图层到地图
      })
      .catch((e) => {
        console.log(e);
      });
    /* 以上归地图 */

    const goback = () => {
      history.go(-1);
    };
    return {
      goback,
    };
  },
};
</script>
<style lang="less">
.mapyemain {
  background-color: #fff;
  * {
    font-size: 28/2px;
  }
  /* 头部栏目 */
  header {
    height: 60px;
    line-height: 60px;
    display: flex;
    flex: 1;
    justify-content: space-around;
    img {
      vertical-align: middle;
      width: 28px;
      height: 28px;
    }
    a:nth-child(2),
    a:nth-child(1) {
      display: inline-block;
      height: 25px;
      font-size: 26/2px;
      font-family: PingFang SC;
      font-weight: 400;
      height: 100%;
    }
    a:nth-child(3) {
      font-size: 26/1.5px;
    }
    .van-icon-arrow-down {
      font-size: 26/2px;
    }
  }
  /* 中部 */
  .mapArea {
    width: 750/2px;
    height: 88/2px;
    display: flex;
    padding: 0 20px;
    justify-content: space-around;
    .van-icon {
      line-height: 0.69rem;
    }
    input {
      width: 70%;
      height: 60%;
      border-radius: 10px;
      border: 0;
      background-color: #eee;
      text-align: center;
    }
  }
  /* 地图找房 */
  .mapSearch {
    height: 15rem;
    width: 100%;
    background-color: yellow;
  }
  .maphouse {
    width: 750/2px;
    .news {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      height: 50px;
      line-height: 50px;
      span:nth-child(1) {
        font-size: 36/2px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        letter-spacing: 1px;
      }
      span:nth-child(2) {
        letter-spacing: 1px;
        font-size: 30/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #5f8edb;
      }
    }
    //地图
    #container {
      width: 750/2px;
      height: 329/2px;
    }
  }
  #container {
    width: 10rem;
    height: 15rem;
  }
}
</style>
